<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>南开大学计算机学院</title>
    <link rel="stylesheet" href="style/normalize.css" />
    <link rel="stylesheet" href="style/base.css" />
    <link rel="stylesheet" href="style/main.css" />
  </head>
  <script>
    // 轮播图逻辑（保持不变）
    document.addEventListener("DOMContentLoaded", function () {
      const carouselImgs = document.querySelector(".carousel-imgs");
      const dots = document.querySelectorAll(".carousel-dots .dot");
      const imgCount = dots.length; 
      let currentIndex = 0; 
      let timer = null; 

      function switchToIndex(index) {
        const offset = -index * (100 / imgCount);
        carouselImgs.style.transform = `translateX(${offset}%)`;
        dots.forEach((dot, i) => {
          dot.classList.toggle("active", i === index);
        });
        currentIndex = index;
      }

      function nextImg() {
        let nextIndex = currentIndex + 1;
        if (nextIndex >= imgCount) {
          nextIndex = 0;
        }
        switchToIndex(nextIndex);
      }

      dots.forEach((dot) => {
        dot.addEventListener("click", function () {
          const index = parseInt(this.getAttribute("data-index"));
          switchToIndex(index);
          resetTimer();
        });
      });

      function startTimer() {
        timer = setInterval(nextImg, 3000);
      }

      function resetTimer() {
        clearInterval(timer);
        startTimer();
      }

      startTimer();

      const carousel = document.querySelector(".carousel");
      carousel.addEventListener("mouseenter", () => {
        clearInterval(timer);
      });
      carousel.addEventListener("mouseleave", startTimer);

      // 新增：轮播图箭头点击切换功能（之前遗漏了）
      document.querySelector(".carousel-arrow.prev").addEventListener("click", () => {
        let prevIndex = currentIndex - 1;
        if (prevIndex < 0) prevIndex = imgCount - 1;
        switchToIndex(prevIndex);
        resetTimer();
      });
      document.querySelector(".carousel-arrow.next").addEventListener("click", () => {
        nextImg();
        resetTimer();
      });
    });
  </script>
  <body>
    <!-- 1. 页面头部 -->
    <header>
      <!-- 顶部南开大学Logo栏（全屏蓝底） -->
      <div class="nankai-top-full">
        <div class="nankai-top">
          <div class="nankai-logo">
            <img src="image/logo.png" alt="南开大学Logo" />
          </div>
          <div class="nankai-motto">
            <img src="image/logo2.png" alt="允公允能 日新月异" />
        </div>
      </div>

      <!-- 学院横幅（带上下间距+左右留白） -->
      <div class="banner-wrapper">
        <div class="college-banner">
          <img src="image/head.png" alt="计算机学院横幅" class="banner-bg" />
        </div>
      </div>

      <!-- 主导航栏（带左右留白） -->
      <div class="nav-wrapper">
        <nav class="main-nav">
          <ul>
            <li><a href="#" class="active">首页</a></li>
            <li>
              <a href="#">学院概况</a>
              <ul class="sub-menu">
                <li><a href="#">学院简介</a></li>
                <li><a href="#">学院领导</a></li>
                <li><a href="#">学院党委</a></li>
                <li><a href="#">组织结构</a></li>
                <li><a href="#">学科学术分委会</a></li>
                <li><a href="#">学位评定分委会</a></li>
                <li><a href="#">教代会、工会委员会</a></li>
                <li><a href="#">专业技术职务评审分委员会</a></li>
              </ul>
            </li>
            <li>
              <a href="#">学科建设</a>
              <ul class="sub-menu">
                <li><a href="#">学科结构</a></li>
                <li><a href="#">计算机科学与技术学科</a></li>
              </ul>
            </li>
            <li>
              <a href="#">师资队伍</a>
              <ul class="sub-menu">
                <li><a href="#">人才计划</a></li>
                <li><a href="#">教授/研究员</a></li>
                <li><a href="#">副教授/副研究员</a></li>
                <li><a href="#">讲师</a></li>
                <li><a href="#">实验教学队伍</a></li>
                <li><a href="#">博士后</a></li>
                <li><a href="#">兼职教授</a></li>
              </ul>
            </li>
            <li>
              <a href="#">人才培养</a>
              <ul class="sub-menu">
                <li><a href="#">本科教育</a></li>
                <li><a href="#">研究生教育</a></li>
                <li><a href="#">研究生导师</a></li>
                <li><a href="#">博士生导师</a></li>
              </ul>
            </li>
            <li>
              <a href="#">科学研究</a>
              <ul class="sub-menu">
                <li><a href="#">系所中心</a></li>
                <li><a href="#">学术团队</a></li>
              </ul>
            </li>
            <li>
              <a href="#">国际交流</a>
              <ul class="sub-menu">
                <li><a href="#">合作院校分布</a></li>
                <li><a href="#">联合培养项目</a></li>
              </ul>
            </li>
            <li>
              <a href="#">人才引进</a>
              <ul class="sub-menu">
                <li><a href="#">招聘岗位</a></li>
              </ul>
            </li>
            <li>
              <a href="#">新闻中心</a>
              <ul class="sub-menu">
                <li><a href="#">最新动态</a></li>
                <li><a href="#">学院公告</a></li>
                <li><a href="#">学生工作通知</a></li>
                <li><a href="#">科研信息</a></li>
                <li><a href="#">本科生教学</a></li>
                <li><a href="#">党团园地</a></li>
                <li><a href="#">研究生招生</a></li>
                <li><a href="#">研究生教学</a></li>
                <li><a href="#">境外交流</a></li>
              </ul>
            </li>
            <li>
              <a href="#">联系我们</a>
              <ul class="sub-menu">
                <li><a href="#">机构设置</a></li>
                <li><a href="#">院长信箱</a></li>
              </ul>
            </li>
            <li><a href="#">English</a></li>
          </ul>
        </nav>
      </div>
    </header>

    <!-- 2. 页面主体（核心：轮播图与左右侧边栏同高） -->
    <main class="main-wrapper">
      <div class="content-wrapper">
        <!-- 左侧功能栏 -->
        <div class="left-sidebar">
          <button>登录后台</button>
          <button>信息检索</button>
          <a href="#">南开邮箱</a>
          <a href="#">南开新闻网</a>
          <a href="#">南开校友网</a>
        </div>

        <!-- 中间轮播图（与左右侧边栏同高） -->
        <div class="center-carousel">
          <section class="carousel">
            <div class="carousel-arrow prev">&lt;</div>
            <div class="carousel-arrow next">&gt;</div>
            <ul class="carousel-imgs">
              <li><img src="image/1.jpg" alt="轮播图1" /></li>
              <li><img src="image/2.jpg" alt="轮播图2" /></li>
              <li><img src="image/3.jpg" alt="轮播图3" /></li>
            </ul>
            <div class="carousel-dots">
              <span class="dot active" data-index="0"></span>
              <span class="dot" data-index="1"></span>
              <span class="dot" data-index="2"></span>
            </div>
          </section>
        </div>

        <!-- 右侧系所栏 -->
        <div class="right-sidebar">
          <button>计算机科学与技术系</button>
          <button>公共计算机基础教学部</button>
          <button>实验教学中心</button>
          <button>国家级虚拟仿真实验教学中心</button>
          <button>大数据技术研究所</button>
          <button>机器智能研究所</button>
          <button>系统与网络研究所</button>
        </div>
      </div>

      <!-- 核心内容网格（轮播图下方的新闻公告区） -->
      <div class="content-grid">
        <!-- 最新动态 -->
        <div class="news-section">
          <div class="section-header">
            <span class="section-icon">📢</span>
            <h3 class="section-title">最新动态</h3>
          </div>
          <ul class="news-list">
            <li class="news-item">
              <a href="#">南开大学承办第十八届中国...</a>
              <span class="news-tag">NEW</span>
              <span class="news-date">11-19</span>
            </li>
            <li class="news-item">
              <a href="#">喜报！南开大学计算机学院...</a>
              <span class="news-tag">NEW</span>
              <span class="news-date">11-19</span>
            </li>
            <li class="news-item">
              <a href="#">南开大学承办第十八届中国...</a>
              <span class="news-tag">NEW</span>
              <span class="news-date">11-18</span>
            </li>
            <li class="news-item">
              <a href="#">我院张久武老师团队荣获第...</a>
              <span class="news-date">11-11</span>
            </li>
            <li class="news-item">
              <a href="#">我院教工在新时代天津市教...</a>
              <span class="news-date">11-05</span>
            </li>
          </ul>
        </div>

        <!-- 学院公告 -->
        <div class="notice-section">
          <div class="section-header">
            <span class="section-icon">📋</span>
            <h3 class="section-title">学院公告</h3>
            <a href="#" class="section-more">More</a>
          </div>
          <ul class="news-list">
            <li class="news-item">
              <span class="news-arrow">>></span>
              <a href="#">讲座教授聘期考核公告</a>
              <span class="news-date">2025-04-08</span>
            </li>
            <li class="news-item">
              <span class="news-arrow">>></span>
              <a href="#">讲座教授聘期考核公告</a>
              <span class="news-date">2025-04-08</span>
            </li>
            <li class="news-item">
              <span class="news-arrow">>></span>
              <a href="#">人才聘期考核公告</a>
              <span class="news-date">2025-04-08</span>
            </li>
            <li class="news-item">
              <span class="news-arrow">>></span>
              <a href="#">人才聘期考核公告</a>
              <span class="news-date">2025-04-08</span>
            </li>
          </ul>
        </div>

        <!-- 学生工作通知 -->
        <div class="notice-section">
          <div class="section-header">
            <span class="section-icon">📚</span>
            <h3 class="section-title">学生工作通知</h3>
            <a href="#" class="section-more">More</a>
          </div>
          <ul class="news-list">
            <li class="news-item">
              <span class="news-arrow">>></span>
              <a href="#">计算机学院 密码与网络空间安全学院关于陈省...</a>
              <span class="news-date">2025-10-10</span>
            </li>
            <li class="news-item">
              <span class="news-arrow">>></span>
              <a href="#">关于招募推荐免试研究生参加青年志愿者扶贫...</a>
              <span class="news-date">2025-08-23</span>
            </li>
            <li class="news-item">
              <span class="news-arrow">>></span>
              <a href="#">关于做好我校2025年高校毕业生基层就业学费...</a>
              <span class="news-date">2025-06-10</span>
            </li>
            <li class="news-item">
              <span class="news-arrow">>></span>
              <a href="#">关于陈省身奖学金的评选通知</a>
              <span class="news-date">2025-06-06</span>
            </li>
          </ul>
        </div>
      </div>
    </main>

    <!-- 3. 页脚 -->
    <footer class="footer-wrapper">
      <div class="footer-content">
        <p>
          Copyright © 2018 - 2020 南开大学计算机学院. All Rights Reserved
          浏览次数: 1262825
        </p>
      </div>
    </footer>
  </body>
</html>